@import "common.less";
#container-main{
  background: #373636;
  overflow: hidden;
  .header{
    background: #000000;
    height: 107px;
    width: 100%;
    position: relative;
    .header-left{
      float: left;
      width: 75%;
      height: 100%;
      .header-l-left{
        float: left;
        margin:25px;
        .live-curse-name{
          opacity: 0.9;
          font-size: 22px;
          color: #FFFFFF;
          letter-spacing: 0;
          line-height: 22px;
          margin-bottom: 20px;
        }
        .curse-list-title{
          text-decoration: none;
          opacity: 0.9;
          font-size: 20px;
          color: #FFFFFF;
          letter-spacing: 0;
          line-height: 20px;
          margin-right: 10px;
          .layui-icon-down,.layui-icon-up{
            vertical-align: middle;
            transition: all 0.8s;
            font-size: 24px;
          }
        }
      }
      .header-l-center{
        float: right;
        margin-top: 75px;
        .video-fun-list{
          .fun-item{
            cursor: pointer;
            float: left;
            margin-left: 25px;
            font-size: 14px;
            color: #9B9B9B;
            letter-spacing: 0;
            line-height: 14px;
            .icon{
              display: inline-block;
              margin-right: 10px;
              width: 18px;
              height: 18px;
              vertical-align: middle;
              background: #9B9B9B;
            }
          }
        }
      }
    }
    .header-right{
      float: left;
      width: 25%;
      height: 100%;
      display: flex;
      justify-content: center;
      .location-box{
        margin-top: 27px;
        .class-cate{
          float: left;
          text-align: center;
          font-size: 18px;
          color: #94A5FA;
          letter-spacing: 0;
          line-height: 18px;
          margin-right: 60px;
          .class-logo{
            width: 32px;
            height: 32px;
            display: block;
            background-color: #94A5FA;
            margin-bottom: 10px;
          }
        }
      }
    }
  }
  .main{
    width: 100%;
    .main-left{
      float: left;
      width: 75%;
      height: 847px;
      position: relative;
      .curse-list{
        display: none;
        min-width: 452px;
        height: 847px;
        background: #4A4A4A;
        position: absolute;
        left: 0;
        top: 0;
        overflow-y: scroll;
        z-index: 500;
        &::-webkit-scrollbar
        {
          display: none;
          width: 2px;
          height: 16px;
          background-color: #111111;
        }

        /*定义滚动条轨道 内阴影+圆角*/
        &::-webkit-scrollbar-track
        {
          -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
          border-radius: 8px;
          background-color:#000000;
        }

        /*定义滑块 内阴影+圆角*/
        &::-webkit-scrollbar-thumb
        {
          border-radius: 10px;
          -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.3);
          background-color: #555;
        }
        .cate-detail{
          margin: 15px 0 0 25px;
          dt{
            margin-bottom: 15px;
            font-weight:500;
            font-size: 17px;
            color: #ffffff;
            letter-spacing: 0;
            line-height: 17px;
            span{
              margin-right: 10px;
            }
          }
          dd{
            margin-bottom: 15px;
            padding-left: 30px;
            .icon-play{
              vertical-align: top;
              display: inline-block;
              width: 30px;
              height: 19px;
              background: #A5A9AD;
              border-radius: 4px;
              margin-right: 15px;
            }
            .class-msg{
              width: 244px;
              display: inline-block;
              .class-title{
                font-size: 16px;
                color: rgba(255,255,255,0.90);
                letter-spacing: 0;
                line-height: 16px;
                margin-bottom: 8px;
              }
              .class-date{
                font-size: 14px;
                color: #9B9B9B;
                letter-spacing: 0;
                line-height: 14px;
              }
            }
            .study-free-btn{
              padding: 0;
              vertical-align: top;
              display: inline-block;
              text-decoration: none;
              width: 92px;
              height: 33px;
              border: 1px solid #94A5FA;
              border-radius: 8px;
              font-size: 15px;
              color: #94A5FA;
              letter-spacing: 0;
              text-align: center;
              line-height: 33px;
              background-color: transparent;
              &:hover{
                background-color: rgba(255,255,255,0.5);
              }
            }
          }
          .active{
            .icon-play{
              background: #FFBD00;
            }
            .class-msg{
              .class-title,.class-date{
                color: #FFBD00;
              }
            }
          }
        }
      }
      #live-program{
        width: 100%;
        height: 847px;
      }
      .control-box{
        width: 100%;
        position: absolute;
        bottom: 0;
        height: 64px;
        background-color: #000000;
        a{
          font-size: 24px;
          text-decoration: none;
          line-height: 64px;
          color: #ffffff;
        }
        .layui-icon-play,.layui-icon-pause{
          float: left;
          margin-left: 30px;
        }
        .full-video{
          display: block;
          float: right;
          height: 20px;
          width: 20px;
          background-color: #fff;
          margin-right: 15px;
          margin-top: 20px;
        }
        .layui-icon-voice{
          float: right;
          margin-right: 30px;
        }
      }
    }
    .main-right{
      width: 25%;
      float: left;
      .layui-tab{
        margin:0;
        width: 100%;
        .layui-tab-title{
          height: 58px;
          border: none;
          li{
            width: 50%;
            height: 58px;
            font-size: 20px;
            color: #F8F9FB;
            letter-spacing: 0;
            text-align: center;
            line-height: 58px;
          }
          .layui-this{
            background: #9B9B9B;
            &::after{
              border: none;
            }
          }
        }
        .layui-tab-content{
          clear: both;
          width: 100%;
          padding: 0;
          background: #4A4A4A;
          .layui-tab-item{
            height: 847px;
          }
          .member-list{
            overflow-y: scroll;
            &::-webkit-scrollbar
            {
              display: none;
              width: 2px;
              height: 16px;
              background-color: #111111;
            }

            /*定义滚动条轨道 内阴影+圆角*/
            &::-webkit-scrollbar-track
            {
              -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
              border-radius: 8px;
              background-color:#000000;
            }

            /*定义滑块 内阴影+圆角*/
            &::-webkit-scrollbar-thumb
            {
              border-radius: 10px;
              -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.3);
              background-color: #555;
            }
            .members{
              display: block;
              margin:15px 0 0 20px;
              .member{
                margin-bottom: 15px;
                width: 90%;
                .member-box{
                  .member-header{
                    width: 48px;
                    height: 48px;
                    border-radius: 50%;
                    overflow: hidden;
                    margin-right: 10px;
                    vertical-align: middle;
                    display: inline-block;
                  }
                  .iden-style{
                    display: inline-block;
                    border-radius: 100px;
                    width: 36px;
                    height: 16px;
                    font-size: 10px;
                    color: #F8F9FB;
                    letter-spacing: 0;
                    text-align: center;
                    line-height: 16px;
                    margin-right: 2px;
                    vertical-align: middle;
                  }
                  .member-name{
                    display: inline-block;
                    font-size: 12px;
                    color: #9B9B9B;
                    letter-spacing: 0;
                    text-align: right;
                    line-height: 48px;
                  }
                  .iden-mst{
                    background: #FF636E;
                  }
                  .iden-mag{
                    background: #4A90E2;
                  }
                  .iden-help{
                    background: #FF9263;
                  }
                }
              }
            }
          }
          .chat-part{
            overflow: hidden;
            background: #373636;
            .chat-area{
              background: #4A4A4A;
              height: 586px;
              overflow-y: scroll;
              margin-bottom: 10px;
              &::-webkit-scrollbar
              {
                display: none;
                width: 2px;
                height: 16px;
                background-color: #111111;
              }

              /*定义滚动条轨道 内阴影+圆角*/
              &::-webkit-scrollbar-track
              {
                -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
                border-radius: 8px;
                background-color:#000000;
              }

              /*定义滑块 内阴影+圆角*/
              &::-webkit-scrollbar-thumb
              {
                border-radius: 10px;
                -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.3);
                background-color: #555;
              }
              padding: 20px 15px 0 15px;
              .send-time-m{
                margin-bottom: 10px;
                .send-time-d{
                  background: #6E6E6E;
                  border-radius: 10px;
                  padding: 0 11px ;
                  height: 20px;
                  display: table;
                  margin: 0 auto;
                  font-size: 12px;
                  color: #FFFFFF;
                  letter-spacing: 0;
                  text-align: center;
                  line-height: 20px;
                }
              }
              .msg-style{
                display: block;
                overflow: hidden;
                margin-bottom: 10px;
                .s-header{
                  background-color: #325633;
                  display: block;
                  width: 36px;
                  height: 36px;
                  overflow: hidden;
                  border-radius: 50%;
                  margin-right: 10px;
                  img{
                    width: 100%;
                    height: 100%;
                  }
                }
                .msg-con{
                  max-width: 60%;
                  .obj-name-con{
                    font-size: 12px;
                    color: #9B9B9B;
                    letter-spacing: 0;
                    line-height: 12px;
                    margin-bottom: 5px;
                  }
                  .msg-con-d{
                    overflow: hidden;
                    word-wrap:break-word;
                    padding: 5.5px 15px;
                    min-width: 25px;
                    max-width: 360px;
                    min-height: 24px;
                    background: #6E6E6E;
                    border-radius: 4px;
                    font-size: 14px;
                    color: #ffffff;
                    letter-spacing: 0;
                    line-height: 24px;
                    img{
                      max-width: 330px;
                      max-height: 500px;
                      min-height: 30px;
                      min-width: 30px;
                    }
                    p{
                      line-height: 24px;
                    }
                  }
                }
              }
              .l-send{
                .s-header{
                  float: left;
                }
                .msg-con{
                  float: left;
                }
              }
              .r-send{
                .s-header{
                  float: right;
                  margin-left: 10px;
                  margin-right: 0;
                }
                .msg-con{
                  float: right;
                }
              }
              .send-body{
                width: 100%;
                height: 36px;
                background: #6E6E6E;
                border-radius: 8px;
                font-size: 14px;
                color: #373638;
                letter-spacing: 0;
                text-align: center;
                line-height: 36px;
                margin-bottom: 10px;
                .gif-logo{
                  display: inline-block;
                  margin-left: 10px;
                  width: 16px;
                  height: 16px;
                  vertical-align: middle;
                  background-color:yellow;
                }
              }
            }
            .send-area{
              width: 100%;
              height: 196px;
              background: #4A4A4A;
              position: relative;
              .layui-layedit{
                border: none;
                .layui-layedit-tool{
                  border: none;
                  padding: 0 0 0 40px;
                }
              }
              .send-flower{
                position: absolute;
                left: 12px;
                top: 8px;
                width: 20px;
                height: 20px;
                background: #6E6E6E;
                display: inline-block;
                cursor: pointer;
                &:hover{
                  background: #4A4A4A;
                }
              }
              .shield{
                position: absolute;
                right: 12px;
                top: 8px;
                width: 20px;
                height: 20px;
                background: #6E6E6E;
                display: inline-block;
                cursor: pointer;
                &:hover{
                  background: #4A4A4A;
                }
              }
              .send-btn{
                padding: 0;
                text-decoration: none;
                width: 58px;
                height: 30px;
                background: #2F5AFF;
                border-radius: 8px;
                font-size: 14px;
                color: #FFFFFF;
                letter-spacing: 0;
                text-align: center;
                line-height: 30px;
                float: right;
                margin-top: 5px;
                margin-right: 15px;
              }
            }
          }
        }
      }
    }
  }
}

//遮罩层
.curse-fun {
  display: none;
  .full-shade {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 10003;
    width: 100%;
    height: 100%;
    background-color: #000;
    opacity: 0.3;
    /*兼容IE8及以下版本浏览器*/
    filter: alpha(opacity=30);
    display: block;
  }
  .hide-style {
    display: none;
    border-radius: 8px;
    position: fixed;
    z-index: 10004;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
    .content-white-bg();
    .hide-d-style {
      overflow: hidden;
      display: block;
      position: relative;
      .curse-title {
        font-weight: 600;
        text-align: center;
        font-size: 20px;
        color: #4A4A4A;
        letter-spacing: 0;
        line-height: 20px;
        margin: 40px 0 25px;
      }
      .layui-icon-close {
        position: absolute;
        right: 20px;
        top: 20px;
        display: block;
        font-size: 30px;
        color: #9B9B9B;
      }
      .del-hint{
        font-size: 14px;
        color: #6E6E6E;
        letter-spacing: 0;
        text-align: center;
        line-height: 14px;
      }
      .sure-btn{
        display: block;
        margin: 0 auto;
        width: 114px;
        height: 40px;
        background: #2F5AFF;
        border-radius: 7px;
        text-decoration: none;
        font-size: 14px;
        color: #FFFFFF;
        letter-spacing: 0;
        text-align: center;
        line-height: 40px;
      }
    }
  }
  .get-ticket{
    display:none;
    width: 364px;
    height: 241px;
    .curse-name-h{
      font-size: 18px;
      color: #2F5AFF;
      letter-spacing: 0;
      text-align: center;
      line-height: 18px;
      margin-bottom: 10px;
    }
    .curse-price{
      font-size: 18px;
      color: #FFBD00;
      letter-spacing: 0;
      text-align: center;
      line-height: 18px;
      margin-bottom: 30px;
    }
    .buy-box{
      display: flex;
      justify-content: center;
      .layui-btn{
        width: 114px;
        height: 40px;
        border-radius: 7px;
        border: 1px solid #2F5AFF;
        margin: 0 15px;
        font-size: 14px;
        color: #2F5AFF;
        letter-spacing: 0;
        text-align: center;
        line-height: 40px;
        background-color: #fff;
        padding: 0;
        text-decoration: none;
      }
      .buy-now{
        background: #2F5AFF;
        color: #ffffff;
      }
    }
  }
}
